
for $i, $index in 5 16 32
  
  //padding
  .pd{$index+1}
    padding ($i)px
    
  .pd{$index+1}x
    padding-left ($i)px
    padding-right ($i)px

  .pd{$index+1}l
    padding-left ($i)px
  
  .pd{$index+1}r
    padding-right ($i)px
    
  .pd{$index+1}y
    padding-top ($i)px
    padding-bottom ($i)px

  .pd{$index+1}t
    padding-top ($i)px
  
  .pd{$index+1}b
    padding-bottom ($i)px

  //margin
  .mg{$index+1}
    margin ($i)px
    
  .mg{$index+1}x
    margin-left ($i)px
    margin-right ($i)px

  .mg{$index+1}l
    margin-left ($i)px
  
  .mg{$index+1}r
    margin-right ($i)px
    
  .mg{$index+1}y
    margin-top ($i)px
    margin-bottom ($i)px

  .mg{$index+1}t
    margin-top ($i)px
  
  .mg{$index+1}b
    margin-bottom ($i)px

.mg-auto
  margin-left auto
  margin-right auto
.mg0
  margin 0
.pd0
  padding 0
  
.block
  display block

.inline
  display inline-block

.iblock
  display inline-block
  vertical-align middle

.ibblock
  display inline-block
  vertical-align baseline
  
.itblock
  display inline-block
  vertical-align top

.border
  border 1px solid #e4e4e4

.borderl
  border-left 1px solid #e4e4e4

.borderr
  border-right 1px solid #e4e4e4

.borderb
  border-bottom 1px solid #e4e4e4
  &.dashed
    border-bottom 1px dashed #e4e4e4

.bordert
  border-top 1px solid #e4e4e4

.borderr
  border-right 1px solid #e4e4e4

.borderl
  border-left 1px solid #e4e4e4

.border-dashed
  border-style dashed
.border-dotted
  border-style dotted

.hide,
.hide1, 
.hide2
  display none

.hidden
  visibility hidden

.fleft
  float left

.fright
  float right

.fcenter
  float center

.fix:before,
.fix:after
  content " "
  display table

.fix
  &:after
    clear both
    
.overhide
  overflow hidden

.overscroll
  overflow scroll

.overscroll-y
  overflow-y scroll

.relative
  position relative
.absolute
  position absolute
.pointer
  cursor pointer
.width-100
  width 100%
.width-40
  width 40%
.width-60
  width 60%
.spin-90
  transform rotate(90deg)